import React from 'react';
import ReactDOM from 'react-dom/client';
// 导入样式
import './list.css';

/* 
  评论列表：
    1. 先静后动，先通过 JSX 搭建结构，完善样式
    2. 数组列表渲染
    3. 条件渲染 空状态
*/

const list = [
  { id: 1, name: '刘德华', content: '给我一杯忘情水' },
  { id: 2, name: '五月天', content: '不打扰，是我的温柔' },
  { id: 3, name: '毛不易', content: '像我这样优秀的人' },
];

// 先静后动
const title = (
  <div>
    {list.length > 0 ? (
      <ul>
        {list.map((item) => (
          <li className='item' key={item.id}>
            <h3>评论人：{item.name}</h3>
            <p>评论内容：{item.content}</p>
          </li>
        ))}
      </ul>
    ) : (
      <div>暂无数据</div>
    )}
  </div>
);

ReactDOM.createRoot(document.getElementById('root')).render(title);
